<template>
    <view class="wrap">
        <div class="toppost">
            <div class="post-list">
                <div class="post_head">
                    <span>最新公告</span>
                    <div class="clear"></div>
                </div>
            </div>
        </div>
        <div class="main r_box">
            <ul>
                <li v-for="(item, index) in content" :key="index" style="margin-top: 5px;background: #fafafa;">
                    <div @click="openPage(item)">
                        <h2>{{ item.nTitle }}</h2>
                        <image v-if="item.nImage" :src="'../../' + item.nImage" style="width: 100%; padding-top: 10rpx;"></image>
                        <div class="postfoot">
                            <div class="f_l">
                                <span class="icon-time"></span>
                                {{ item.nTime }}
                            </div>
                            <div class="f_r">
                                <span class="icon-eye"></span>
                                {{ item.nUser }}
                                <span class="icon-message"></span>
                            </div>
                        </div>
                    </div>
                    <u-row gutter="16" justify="center">
                        <u-col span="3">
                            <u-button v-if="user && user.admin == 1" @click="toUp(item)" shape="square" size="mini" type="primary" style="margin-top: 10rpx;">修改公告</u-button>
                        </u-col>
                        <u-col span="3">
                            <u-button v-if="user && user.admin == 1" @click="del(item.nId)" shape="square" size="mini" type="warning" style="margin-top: 10rpx;">删除公告</u-button>
                        </u-col>
                    </u-row>
                </li>
            </ul>
        </div>
        <u-gap height="70"></u-gap>
    </view>
</template>

<script>
export default {
    data() {
        return {
            content: [],
            user: undefined,
            isopen: false,
            pages: {
                page: 0,
                size: 10
            }
        }
    },
    mounted() {},
    computed: {
        getIcon() {
            return path => {
                return 'https://cdn.uviewui.com/uview/example/' + path + '.png'
            }
        },
        desc() {
            return '众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让你快速集成，开箱即用'
        }
    },
    onShow() {
        uni.setNavigationBarTitle({
            title: '公告'
        })
        if (this.isopen) {
            this.getData()
        }
        this.user = uni.getStorageSync('user_info')
    },
    onLoad() {
        this.getData()
        this.isopen = true
    },
    methods: {
        openPage(item) {
            this.$u.route({
                url: 'pages/notice/notice_show?title=' + item.nTitle + '&notice=' + item.nNotice + '&nUser=' + item.nUser + '&nTime=' + item.nTime
            })
        },
        del(id) {
            this.$u.post('/apps/ssNoticeEntity/del', { nId: id }).then(res => {
                if (res) {
                    this.getData()
                }
            })
        },
        getData() {
            this.$u.get('/apps/ssNoticeEntity', this.pages).then(res => {
                if (res) {
                    this.content = res.content
                }
            })
        },
        toUp(item) {
            var p = JSON.stringify(item)
            this.$u.route({
                url: 'pages/notice/notice_add?p=' + p
            })
        }
    }
}
</script>

<style lang="scss" scoped>
body {
    background: #efefef;
}

.u-cell-icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 8rpx;
}
.nav-wrap {
    padding: 15px;
    position: relative;
}

.lang {
    position: absolute;
    top: 15px;
    right: 15px;
}

.nav-title {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    align-items: center;
}

.nav-info {
    margin-left: 15px;
}

.nav-title__text {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    color: $u-main-color;
    font-size: 25px;
    font-weight: bold;
}

.logo {
    width: 70px;
    /* #ifndef APP-NVUE */
    height: auto;
    /* #endif */
}

.nav-slogan {
    color: $u-tips-color;
    font-size: 14px;
}

.nav-desc {
    margin-top: 10px;
    font-size: 14px;
    color: $u-content-color;
}

.toppost .post-list {
    width: 100%;
    padding: 0 10px;
}

.post-list .post_head,
.art_list .art_head,
.actext-d h3,
.actext-e h3,
.msg p {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 8px;
    padding-top: 4px;
    border-radius: 18px 20px 20px 0;
    background-color: #f5f5f5;
}

.post-list .post_head span,
.art_list .art_head span,
.actext-d h3 span,
.actext-e h3 span,
.msg p span {
    display: inline-block;
    background-color: #e71a1a;
    border-radius: 20px 20px 20px 0;
    margin-top: -4px;
    padding: 6px 22px;
    color: #fff;
}

.main {
    overflow: hidden;
    width: 70%;
    float: left;
    display: block;
}

.r_box,
.infosbox,
.picsbox,
.main {
    width: 100%;
}

ul,
li {
    list-style: none;
}

ul {
    display: block;
    list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

.r_box li {
    margin-bottom: 10px;
}

.r_box li {
    padding: 20px;
}

.r_box li {
    background: #fff;
    padding: 30px 25px;
    overflow: hidden;
    color: #797b7c;
    margin-bottom: 20px;
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-duration: 500ms;
    animation-duration: 500ms;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.r_box li h2 {
    font-size: 18px;
    line-height: 25px;
    color: #f1404b;
    font-weight: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
}

div,
h1,
h2,
h3,
h4,
h5,
p,
form,
ul,
label,
input,
textarea,
img,
span,
dl,
dt,
dd {
    margin: 0px;
    padding: 0;
    outline: 0;
}

.r_box li p {
    margin: 20px 0 0 0;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 44px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
}

div,
h1,
h2,
h3,
h4,
h5,
p,
form,
ul,
label,
input,
textarea,
img,
span,
dl,
dt,
dd {
    margin: 0px;
    padding: 0;
    outline: 0;
}

.r_box .postfoot {
    /* margin: 20px 0 0 0; */
    padding-top: 10px;
    overflow: hidden;
    /* display: block; */
    clear: both;
}
.f_l {
    float: left;
}

.f_r {
    float: right;
}
</style>
